<html>
<head>
<title> YATE example </title>
		<style type="text/css">
table{
	width: 100%;
    font-size: 12pt;  
	font-color: #333;
}
	
td{
	border-bottom: 1px  solid #eee;
	text-align:center;
	vertical-align: middle;
	padding: 0px 10px;
}

tr.header-row td{
	height: 20px;
	border-top: 1px solid #eee;
	font-size: 90%;
	color: #414D57;
}

tr.content-row{
	height: 30px;
} 
			
.bar_container{
	height: 8px; 
	margin:3px 0px;
	border: 1px solid #ccc;
}
.bar_outer{

}
.bar_inner{
	background-color: #99D97F; 
	height: 100%;  
	width:30%;
}
		</style>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script language="javascript" src="http://mu-labs.googlecode.com/svn/trunk/eng/tools/YATE/jquery.yate-1.0.js" ></script>
</head>

<body>



<div  >

<div class="templateonly0"   style="  float:right;  width:390px;  ">
<div style="color: #E56A1F; font-weight: bold; padding-bottom:  2px;">My Lego projects (template only)</div> 
			<table style="border: 1px solid #eee;">
				<thead>
				  <tr class="header-row">
					<td style="text-align: left;">Name</td>
					<td style="width: 50px;">Queue #</td>
					<td style="width: 50px;">Status</td>
					<td style="">Date</td>
			 	  </tr>
			 	</thead>
			 	<tbody   >  
<tr class="content-row" >
 <td style="text-align:left;"><a href="{y:t link}  #  {/y:t}">
    <y:t title>
       Atlantis
    </y:t>
   </a>
</td>
<td ><y:t status.queuenum>-</y:t></td>
<td >
  <y:t status.progress>
    <div class="bar_container">
	 <div class="bar_inner"></div> 
	</div>
  </y:t>
  <y:t remove>
    <div class="bar_container">
	 <div class="bar_inner"></div> 
	</div>
  </y:t>						  						   
</td>
<td class=" tpl_date "><y:t date  >03/10/2010</y:t></td>
</tr>
			  </tbody>
			</table>
</div>



<div style="margin-right: 400px;"> 

<input type="button" value='update &rarr;' style=" float:right;    " onclick="usetemplate();" />

<textarea id="template" rows="30" style="width:100%; " >
<tr class="content-row" >
 <td style="text-align:left;"><a href="{y:t link}  #  {/y:t}">
    <y:t title>
       Atlantis
    </y:t>
   </a>
</td>
<td ><y:t status.queuenum>-</y:t></td>
<td >
  <y:t status.progress>
    <div class="bar_container">
	 <div class="bar_inner"></div> 
	</div>
  </y:t>
  <y:t remove>
    <div class="bar_container">
	 <div class="bar_inner"></div> 
	</div>
  </y:t>						  						   
</td>
<td ><y:t date  >03/10/2010</y:t></td>
</tr>

</textarea>
</div> 
 

</div>


<br/><br/>


<div > 
<div id="useyate"   style=" float:right;  width:390px; ">
			<div style="color: #E56A1F; font-weight: bold; padding-bottom:  2px;">My Lego projects (with real data)</div>
			<table style="border: 1px solid #eee;" >
				<thead>
				  <tr class="header-row">
					<td style="text-align: left;">Name</td>
					<td style="width: 50px;">Queue #</td>
					<td style="width: 50px;">Status</td>
					<td style="">Date</td>
			 	  </tr>
			 	</thead>
			 	<tbody   >  
 
			  </tbody>
			</table>
	<br/>
	<div id="rendertime"></div>
</div>
 
<div style="margin-right: 400px;"> 
<input type="button" value='render data by "YATE" &rarr;' style=" float:right;    " onclick="useyate();" />
<textarea id="data" rows="30" style="width:100%; ">
var data = [
    {'title':'Transformer', 
     'link': "#transformer",    
     'status':{queuenum:'-', progress:['0.9'] }, 
     'date':'3/3/10'}, 
    {'title':'Pirates', 
     'link': "#pirates",
     'status':{queuenum:'-', progress:[1, '0.8', 0.2] }, 
     'date':'3/6/10'}, 
    {'title':'Castle', 
     'link': "#castle",
     'status':{queuenum:'1', progress:'Queued'}, 
     'date':'3/28/10'},
    {'title':'Race Car', 
     'link': "#racecar",
     'status':{queuenum:'2', progress:'Queued'}, 
     'date':'3/30/10'}
];			      
	
	
var logic = {
   "status.progress" : function (para) {
		var d = para.data[para.index];
	 	var node = para.node;
	 	if (typeof d.status.progress === 'string') {
	 		return d.status.progress;
	 	}
	 	var r = "";
	 	$n = $(node);
	 	for(var i in d.status.progress){
	 	var item = d.status.progress[i];
	 	 
	 	r += $n.attr('title', (item * 100) + "%")
		 	 .children().css('width', (item * 100) + "%").parent().parent().html();
	 	}
	 	return r;
	 },
   date: function(para){
	  	var d = para.data[para.index];
	 	return d['date']+" at "+(new Date()).getSeconds()+"s";
	 }
};		
</textarea>

</div>

</div>


<script language="javascript" >
var counter=0;
var id = '.templateonly'+counter;

function usetemplate(){
	
	var txt = $('#template').val();
 
 	counter++;
 	$(id).removeClass('templateonly'+(counter-1)).addClass('templateonly'+counter);
 	id = '.templateonly'+counter;
 	
	$(id+' table tbody').html('');
	$(txt).appendTo(id+' table tbody');
	useyate();
	
	 
}

function useyate(){
	eval( $('#data').val() );
	
	$('#useyate table tbody').empty();
	var start = new Date();
	var html = $.yate({template_selector: id+' table tbody', 'data': data, 'options': logic, returnHtml: true});

	$('#useyate table tbody').html(html);
	
	$('#rendertime').html("render time: "+(new Date()-start)+" ms");
}
</script>


</body>

</html>
